<template>
  <div class="md-list">
    <div class="lst-img">
      <img src="../images/icon_maintenance.png" alt="" />
    </div>
    <p>电视维护费充值</p>
    <p>充值智能卡号：{{ intelligentNo }}</p>

    <div class="lst costList">
      <div class="lst-ct"  v-for="product in products" @touchstart="activeItem($index)">
        <h4 class="lst-money">{{ product.goodsPrice/100}}元</h4>
        <div class="lst-times">{{ product.goodsSum }}个月</div>
      </div>
    </div>
    <div class="lst-fd">
      <button type="button" @click="paying"><span>确定</span></button>
    </div>
  </div>
  <toast v-show="loading" :type="'loading'">加载中</toast>
  <dialog v-show="dialog" :title="'错误提示'" :type="" @weui-dialog-confirm="dialog=false">
    <p>加载失败，请重试</p>
  </dialog>
</template>
<script>
  import {Toast, Dialog} from "vue-weui";
  import {AJAX} from "../methods/query.js";
  export default {
    data() {
      return {
        intelligentNo: this.$route.query.intelligentNo,
        loading: false,
        dialog: false,
        products: [],
        curId: ""
      };
    },
    methods: {
      activeItem (e) {
        let ele = document.querySelectorAll('.costList .lst-ct');
        this.curId = this.products[e].id;
        for (let k = 0; k < ele.length; k++) {
          ele[k].classList.remove('active');
        }
        ele[e].classList.add('active');
      },
      async paying() {
        if (this.curId === "") {
          this.curId = this.products[0].id;
        }
        let rechargeTwo = await AJAX.rechargeTwo({
          id: this.curId,
          openid: this.$root.openId,
          intelligentNo: this.intelligentNo
        });
        console.log(rechargeTwo.resInfo);
        if (rechargeTwo.resCode === "1112") {
          alert(rechargeTwo.resInfo);
          this.$route.router.go('/');
          return;
        } else {
          window.location.href = "https://pay.swiftpass.cn/pay/jspay?token_id="
          + rechargeTwo.resInfo + "&showwxpaytitle=1";
        }
      }
    },
    async ready() {
      let getMaintenance = await AJAX.getMaintenance();
      this.products = getMaintenance.resInfo;
      this.$nextTick(() => {
        let ele = document.querySelectorAll('.costList .lst-ct');
        for (let k = 0; k < ele.length; k++) {
          ele[0].classList.add('active');
        }
      });
    },
    components: {
      Toast,
      Dialog
    }
  };
</script>
<style scoped lang="less">
  .md-list{
    position: absolute;
    width:100%;
    height: 100%;
    color:#404040;
    font-size: .8rem;
    background-color: #fff;
    .lst-img{
      width:2rem;
      height:2rem;
      margin:0 auto;
      margin-top: 2rem;
      margin-bottom: .5rem;
      img{
        width: 100%;
        height:auto;
      }
    }
    p{
      text-align: center;
      line-height: 1.5rem;
    }
    p:last-of-type{
      color:#6C6C6C;
      padding-bottom:1rem;
    }

    .lst{
      margin-right: .5rem;
      .lst-ct{
        float: left;
        width:30.33%;
        color:#15A1D6;
        height:3.8rem;
        margin:.3rem 0;
        padding:.5rem 0;
        text-align: center;
        border-radius: .2rem;
        border:1px solid #15A1D6;
        margin-left:3%;
      }
    }
    .lst-fd button{
      position: fixed;
      bottom: 0;
      left: 0;
      padding: .5rem 0;
      width:90%;
      margin-left:5%;
      margin-bottom: .5rem;
      border-radius: .3rem;
      background-color: #15A1D6;
      text-align: center;
      color:#fff;
    }
  }
  .costList {
    .lst-ct{
      &.active {
          background-color: #15A1D6;
          color:#fff;
      }
    }
  }
</style>
